<template>
    <div class="detail page" id="detail" ref="detail">
        <div class="headbox" v-show="showHead" :style="opacityStyle">
            <div class="back" @click="back">
                <img src="./image/返回.png" alt="" />
            </div>
            <div class="title">商品详情</div>
            <div class="seat">
                <div @click="turn('/cart')"><img src="./image/购物车000.png" /></div>
                <div @click="plantPoster"><img src="./image/分享000.png" /></div>
            </div>
        </div>
        <div class="headSec">
            <div class="back" @click="back">
                <img src="./image/左.png" />
            </div>
        </div>
        <div class="con">
            <div class="slide">
                <cube-slide :data="midImgs" v-if="midImgs" :showDots="false" @change="changPage" :refreshResetCurrent="true">
                    <cube-slide-item v-for="(item, index) in midImgs" :key="index">
                        <img class="img" :src="imgH+item">
                    </cube-slide-item>
                </cube-slide>
                <div style="z-index:1000" class="iconbox">
                    <div @click="turn('/cart')"><img src="./image/购物 车.png" /></div>
                    <div @click="plantPoster"><img src="./image/分享2.png" /></div>
                </div>
                <div class="currentIndex"><span>{{currentIndex+'/'+midImgs.length||'1'}}</span></div>
            </div>
            <div class="desc" v-if="item">
                <div class="control">
                    <div class="price">
                        <span class="nowPrice">¥<span class="nowPriceBig">{{item.nowPrice?parseInt(item.nowPrice):'00'}}</span>.{{item.nowPrice?item.nowPrice.toFixed(2).split('.')[1]:'00'}}</span>
                        <span class="oldPrice">¥<span class="oldPriceBig">{{item.oldPrice?parseInt(item.oldPrice):'00'}}</span>.{{item.oldPrice?item.oldPrice.toFixed(2).split('.')[1]:'00'}}</span>
                        <!-- <span class="oldPrice">¥{{item.oldPrice?item.oldPrice.toFixed(2):'0.00'}}</span> -->
                        <div v-if="shopPrice" class="title">采购价: </div>
                        <div v-if="shopPrice" class="proPrice">¥
                            <span class="text">{{this.shopPrice?parseInt(this.shopPrice):'00'}}</span>
                            .{{this.shopPrice?this.shopPrice.toFixed(2).split('.')[1]:'00'}}
                        </div>
                    </div>

                </div>
                <div class="tips">
                    <!-- <div class="cell" v-if="item.act&&item.act.cashReward"> -->
                    <p v-if="coupons.cashReward&&coupons.cashReward!==''" class="red">送代金券¥{{coupons.cashReward.split('_')[1]}}</p>
                    <p v-if="coupons.voucherReward&&coupons.voucherReward!==''" class="yellow">送换购券¥{{coupons.voucherReward.split('_')[1]}}</p>
                    <p v-if="coupons.maxCoupon&&coupons.maxCoupon!==''" class="green">可用优惠券¥{{coupons.maxCoupon}}</p>
                    <p v-if="coupons.maxVoucher&&coupons.maxVoucher!==''" class="green">可用换购券¥{{coupons.maxVoucher}}</p>
                </div>
                <div class="nameBtn">
                    <div class="name">
                        {{item.name}}
                    </div>
                    <div v-if="item.name&&item.name.indexOf('好物团品')>-1" class="btn" @click="addGroup">
<!--                        <img src="./image/分享2.png">-->
                        <span>开团</span>
                        <!--                        <div class="item">-->
                        <!--                            <img src="./image/收藏.png">-->
                        <!--                            <div>收藏</div>-->
                    </div>
                </div>
                <div class="nameInfo">
                    <div :class="['txt', { 'over-hidden': !unfold }]" ref="textBox">
                        <span ref="spanBox">{{item.info}}</span>
                    </div>
                    <div class="btn" v-if="ifOver" @click="unfold = !unfold">{{unfold ? '收起' : '展开更多'}}
                        <img v-if="unfold==true" src="./image/展开更多1.png">
                        <img v-if="unfold==false"  class="all"  src="./image/展开更多.png" alt="">
                    </div>
                </div>
            </div>
            <!--            <div class="coupon">-->
            <!--                <div class="title">可使用优惠券¥35</div>-->
            <!--                <div class="btn">点我立即领取</div>-->
            <!--            </div>-->
            <!--            <div class="mode">-->
            <!--                <div class="item">-->
            <!--                    <div class="title">发货</div>-->
            <!--                    <div class="content">-->
            <!--                        <div class="img"><img src="./image/坐标.png"></div>-->
            <!--                        <div class="area">湖南长沙</div>-->
            <!--                        <div>快递：免运费</div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="mode" v-if="list">
                <div class="msg" v-for="(bindItem,index) in list">
                    <div class="title">推荐套餐{{index+1}}</div>
                    <div class="goods">
                        <div class="goodsImg">
                            <div class="selected"><img src="./image/选择1.png" /></div>
                            <img :src="imgH+item.img" />
                            <div class="namePrice">
                                <div class="name">{{item.name}}</div>
                                <div class="price">¥{{item.nowPrice?parseInt(item.nowPrice):'0'}}<span class="priceLittle">.{{item.nowPrice?item.nowPrice.toFixed(2).split('.')[1]:'00'}}</span></div>
                            </div>
                            <div class="num" v-if="bindItem.bindNumber">x{{bindItem.bindNumber}}</div>
                        </div>
                        <div class="goodsImg">
                            <div class="selected"><img src="./image/选择1.png" /></div>
                            <img :src="imgH+bindItem.img" />
                            <div class="namePrice">
                                <div class="name">{{bindItem.name}}</div>
                                <div class="price">
                                    <span class="nowPrice">¥{{bindItem.nowPrice?parseInt(bindItem.nowPrice):'0'}}<span class="priceLittle">.{{bindItem.nowPrice?bindItem.nowPrice.toFixed(2).split('.')[1]:'00'}}</span></span>
                                    <!-- <span class="oldPrice">¥{{bindGoods.oldPrice?bindGoods.oldPrice.toFixed(2):'0'}}</span> -->
                                </div>
                            </div>
                            <div class="num" v-if="bindItem.firstBindNumber">x{{bindItem.firstBindNumber}}</div>
                        </div>
                    </div>
                    <div class="sum">
                        <span>搭配价:</span>
                        <span class="now">¥{{item.nowPrice*bindItem.bindNumber + bindItem.nowPrice*bindItem.firstBindNumber}}</span>
                        <!-- <span class="old">¥{{item.nowPrice*(firstBindNumber||1)+bindGoods.oldPrice*(bindNumber||1)}}</span> -->
                        <span>已节省:</span>
                        <span class="last">
                          ¥{{
                             (item.nowPrice*(bindItem.bindNumber||1) + bindItem.oldPrice*(bindItem.firstBindNumber||1))
                            -(item.nowPrice*(bindItem.bindNumber||1) + bindItem.nowPrice*(bindItem.firstBindNumber||1))
                            }}
                        </span>
                    </div>
                    <div class="btn" @click="buyBind(bindItem)">
                        购买此套餐
                    </div>
                </div>
            </div>
            <div class="mode">
                <div v-if="hasSku">
                    <div class="itembox" @click="showSku">
                        <div class="titlebox">规格</div>
                        <div class="contentbox">请选择</div>
                        <img src="./image/右1.png" alt="" />
                    </div>
                    <!-- <div class="item" v-if="item">
                        <div class="content pl45">
                            <div v-for="(item,index) in item.mallSkus" v-if="index<3" :key="index">{{item.name}}</div>
                        </div>
                    </div> -->
                </div>

            </div>



            <!-- <div class="mode">
                <div class="evaluation">
                    <div class="titleobx">
                        <div class="title">商品评价</div>
                        <div class="more">查看更多(3)<img src="./image/右.png"></div>
                    </div>
                    <div class="box">
                        <div class="user"><img src=""><span>用户名</span></div>
                        <div id="dateInfo">2020-11-16规格:1盒/20片</div>
                        <div class="info">评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息评论信息</div>
                        <div class="img"><img src="" /><img src="" /><img src="" /></div>
                    </div>
                </div>
            </div> -->
            <!-- <appraise v-if="comments.length>0&&item" :comments="comments" size :goodsId="item.id"></appraise> -->

          <div class="wx_qr">
            <img  style="width: 100%" v-if="group" :src="imgH+group.userWxQr" alt="">
          </div>

          <appraise v-if="item" :comments="comments" size :goodsId="item.id"></appraise>
            <div class="mode">
                <div class="dowGoods">
                    <div v-if="docData.length!=0" class="boxA">
                        <div class="titlebox">
                            <div class="dowtxt">文档下载</div>
                            <div class="all" @click="showDow"> 查看全部<img src="./image/右.png"></div>
                        </div>
                        <div class="content">
                            <div class="line">
                                <div class="name">{{docData[0].name}}</div>
                                <div class="dow" @click="docDowload(docData[0].linkRef,docData[0].name)">点击下载>></div>
                            </div>
                        </div>
                    </div>
                    <div class="boxB">
                        <div class="titlebox">
                            <div class="dowtxt">问店铺</div>
                            <div class="all" @click="goAsking('/asking')" >查看全部<img src="./image/右.png"></div>
                        </div>
                        <div class="content">
                            <div class="line">
                                <div class="name namebox">&nbsp;咨询商品问题点击去提问吧</div>
                                <div class="dow"  @click="goAsking('/asking')">
                                    <span>去提问</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mode">
                <div class="item itemB" @click="showPro">
                    商品参数
                    <div class="title titleB"></div>
                    <div class="btn" >
                        <i class="cubeic-arrow"></i>
                    </div>
                </div>
                <div class="descBox" v-if="item">
                    <div class="box"><span class="descName">品牌:</span>{{brandName||'无'}}</div>
                    <div class="box"><span class="descName">类别:</span>{{typeName||'无'}}</div>
                    <div class="box"><span class="descName">单位:</span>{{item.unit||'无'}}</div>
                    <div class="box"><span class="descName">生产日期:</span>{{item.createTime||'无'}}</div>
                    <div class="box boxHid"><span class="descName">保质期:</span>{{item.guaranty||'无'}}</div>
                </div>

                <priceForm v-if="item&&(item.saleType == 1||item.saleType == 6)&&priceList!=[]" :priceList="priceList"></priceForm>

                <!--                <div class="item flexL">-->
                <!--                    <div class="tips">-->
                <!--                        <img src="./image/corret.png">商家发货&售后-->
                <!--                    </div>-->
                <!--                    &lt;!&ndash;                    <div class="tips">&ndash;&gt;-->
                <!--                    &lt;!&ndash;                        <img src="./image/corret.png">享退货运费险&ndash;&gt;-->
                <!--                    &lt;!&ndash;                    </div>&ndash;&gt;-->
                <!--                    <div class="tips">-->
                <!--                        <img src="./image/corret.png">7天无理由退货-->
                <!--                    </div>-->
                <!--                </div>-->
                <div style="width: 100%; padding-bottom: 15px;"></div>
            </div>

            <div class="mode">
                <div class="shop" v-if="shop">
                    <div class="shopImg"><img :src="imgH+shop.avatar"></div>
                    <div class="name">{{shop.name}}</div>
                    <div class="btn" @click="toShop(shop.userId)">进店看看<img src="./image/右2.png"></div>
                </div>
                <div class="shop" v-if="!shop">
                    <div class="shopImg"><img src="./image/sjyx.png"></div>
                    <div class="name">社集优选官方旗舰店</div>
                    <div class="btn" @click="toShop(0)">进店看看<img src="./image/右2.png"></div>
                </div>
            </div>

            <div class="imgDetail" v-if="item">
                <div class="title">图文详情</div>
                <div class="img" v-for="(item,index) in bigImgs" :key="index">
                    <img :src="imgH+item" alt="">
                </div>
            </div>

        </div>
        <buybar v-if="item" @toCommit="toCommit" @addCart="addCart" :flag="(item.stock==null||item.stock <= 0)  && item.saleType==1" :badge="cartCount" :shop="shop"></buybar>
        <div class="sku" v-show="skuShow" @touchmove.prevent>
            <div class="bg" @click="hideSku"></div>
            <div class="cart" v-if="item">
                <div class="cartCon">
                    <div class="title">
                        <div class="goodsImg"><img :src="imgH+skuImg"></div>
                        <div class="desc">
                            <div class="price">¥{{nowPrice?nowPrice.toFixed(2):'0.00'}}</div>
                            <!--                            <div class="price" v-else>¥{{item.mallSkus[activeIndex].nowPrice?item.mallSkus[activeIndex].nowPrice.toFixed(2):'0.00'}}</div>-->
                            <div class="stock">库存{{stock}}件</div>
                            <div class="word">{{this.skuName?this.skuName.join('-'):'请选择 产品规格'}}</div>
                        </div>
                    </div>
                    <div class="types" v-if="item&&sku">
                        <div class="cell">
                            <!--                            <div class="title">产品规格</div>-->
                            <cube-scroll
                                    ref="scroll"
                                    :data="sku"
                                    :options="options">
                                <div class="type">
                                    <div class="side" v-for="(theme,themeIndex) in sku" :key="theme.id">
                                        <div class="title">{{theme.name}}</div>
                                        <div class="itemBox">
                                            <div
                                                    class="item"
                                                    v-for="(item,index) in theme.items"
                                                    :key="index"
                                                    :class="{active:item.selected,disabled:item.disabled}"
                                                    @click="changeType(themeIndex,index,item.name,item.selected,item.disabled)"
                                            >{{item.name}}</div>
                                        </div>
                                    </div>
                                </div>
                            </cube-scroll>
                        </div>
                    </div>
                    <div class="count" v-if="!toggle">
                        <div class="title">购买数量</div>
                        <div class="step">
                            <numinput v-model="quantity"></numinput>
                        </div>
                    </div>
                    <div class="toCart ok" v-if="toggle" @click="buyBind">确认</div>
                    <div class="toCart" v-if="!toggle">
                        <div class="join" @click="addCart">加入购物车</div>
                        <div class="buy" @click="toCommit">直接购买</div>
                    </div>
                </div>
            </div>
        </div>


        <div class="shareBg" v-show="isShow" @click="toShare" @touchmove.prevent></div>
        <div class="dowLoadBox" v-show="dowState" >
            <div class="download">
                <div class="title">
                    <div class="text">文档下载</div>
                    <img @click="showDow" src="./image/删除.png" />
                </div>
                <div class="content" v-for="item in docData" :key="item.id">
                    <div class="line">
                        <div class="text" v-if="item.name">{{item.name}}</div>
                        <div class="dow" v-if="item.linkRef" @click="docDowload(item.linkRef,item.name)">点击下载>></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sku" v-show="showProduct" >
            <div class="bg" @click="showPro"></div>
            <div class="product" v-if="item">
                <div class="con">
                    <div class="title">产品参数</div>
                    <div class="content">
                        <ul class="name">
                            <li>品牌</li>
                            <li>类别</li>
                            <li>单位</li>
                            <li>生产日期</li>
                            <li>保质期</li>
                        </ul>
                        <ul class="parameter">
                            <li>{{brandName||'无'}}</li>
                            <li>{{typeName||'无'}}</li>
                            <li>{{item.unit||'无'}}</li>
                            <li>{{item.createTime||'无'}}</li>
                            <li>{{item.guaranty||'无'}}</li>
                        </ul>
                    </div>
                    <div class="btn" @click="showPro">完成</div>
                </div>
            </div>
        </div>

        <!--        <img-->
        <!--                v-if="item"-->
        <!--                id="mainImg"-->
        <!--                ref="mainImg"-->
        <!--                :src="imgH+item.img"-->
        <!--                @click="initCanvas"-->
        <!--                style="height: 290px;width: 290px"-->
        <!--        >-->

        <!--        <canvas ref="canvas" id="poster" width="100%" ></canvas>-->

        <div ref="poster" class="poster" v-if="item&&showMainPoster">
            <img class="bg" src="./image/sharePoster.png">
            <img class="mainImg" :src="imgH+item.img">
            <img class="shopImg" v-if="shop" :src="imgH+shop.avatar">
            <img class="shopImg" v-if="!shop" src="./image/sjyx.png">
            <div class="title">{{shop?shop.name:'社集优选官方旗舰店'}}</div>
            <img class="wxQrCode" :src="wxQrCode">
            <div class="word">
                <div class="name" v-if="group">{{group.title}}</div>
                <div class="name" v-else>{{item.name|ellipsisName}}</div>
                <div class="desc" >{{item.info|ellipsisInfo}}</div>
            </div>
            <div class="price">{{parseInt(item.nowPrice)}}<span class="float">.{{item.nowPrice*100%100?item.nowPrice*100%100:'00'}}</span></div>

            <img v-if="item.discountInfo||item.discountPrice||item.discountPrice||item.actInfo||item.buyTheme||item.buyInfo" class="shareTitle" src="./image/shareTittle.png">
            <div v-if="item.discountInfo" class="discountInfo">{{item.discountInfo||''}}</div>
            <div v-if="item.discountPrice" class="discountPrice">{{item.discountPrice||''}}</div>
            <div v-if="item.actInfo" class="actInfo">{{item.actInfo||''}}</div>
            <div v-if="item.buyTheme" class="buyTheme">{{item.buyTheme||''}}</div>
            <div v-if="item.buyInfo" class="buyInfo">{{item.buyInfo||''}}</div>
        </div>


        <img @touchmove.prevent class="posterImg" v-show="showPoster" :src="posterUrl" @click="hidePoster"/>
        <img class="liveImg" v-if="liveId" src="./image/liveImg.gif" style="width: 62px;height: 82px" @click="toLIve"/>
    </div>
</template>

<script>
    import appraise from '@/components/appraise'
    import priceForm from '@/components/price-form'
    import numinput from '@/components/base/num-input'
    import buybar from '@/components/detail-bar'
    import {mapState, mapActions} from 'vuex'
    import {addCart, getPriceList} from "@/api/cart";
    import Wx from '@/wx'
    import {config} from "@/util/wx";
    import {share} from "../../api/point";
    import {detail} from "@/api/home";
    import {docDown, group} from "@/api/goods"
    import {showInfo, showLoading, hide, showError} from "../../toast";
    import {info} from "../../api/user";
    import {getQrCode} from "@/api/user"
    // import html2canvas from "html2canvas"
    import html2canvas from '../../common/js/html2canvas'
    // import {setShareId, setTeamId} from "@/util/cookie";
    export default {
        name: "detail",
        components:{ buybar,numinput,appraise,priceForm },
        data(){
            return{
                showHead:true,
                opacityStyle:{
                    opacity:0
                },
                url:null,
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                toCart:false,
                isShow:false,
                skuShow: false,
                quantity:0,
                shareId:null,
                teamId:null,
                skuName:[],
                priceList:[],
                item: null,
                group:null,
                midImgs:[],
                bigImgs:[],
                activeIndex:-1,
                shop:{},
                bindGoods:{},
                bindNumber:null,
                firstBindNumber:null,
                toggle:false,
                showProduct:false,
                typeName:[],
                list:[],
                brandName:null,
                options:{},
                wxQrCode:null,
                posterUrl:null,
                showPoster:false,
                showMainPoster:true,
                mallSkus:[],
                sku:[],
                nowPrice:null,
                stock:null,
                shopPrice:null,
                skuImg:null,
                liveId:null,
                comments:[],

                currentIndex:1,
                stateBox: false,
                coupons: [],
                dowState: false,
                length: 50,
                ifOver: true,
                unfold: false,
                docData: []
            }
        },
        activated() {
          //自动申请开团
          group(this.$route.query.id).then(res=>{
            if(res.data){
              this.group = res.data
            }
          })
          let shareId  = this.$route.query[process.env.VUE_APP_TOP_USER_ID]
          let teamId  =  this.$route.query.teamId
          //加入全局参数
          this.mall.shareId = shareId
          this.mall.teamId = teamId
            // if(shareId){
            //   setShareId(shareId)
            // }
            // if(teamId){
            //   setTeamId(teamId)
            // }
            this.ifOver = false
            this.skuName = []
            this.quantity = 1
            this.activeIndex = -1
            this.toCart = false
            this.posterUrl = null
            this.showMainPoster = true
            this.skuShow = false
            info().then(res=>{
                if ((Date.parse(new Date())-Date.parse(res.data.time))/86400000<1&&!res.data.mobile){
                    this.$createDialog({
                        type: 'confirm',
                        icon: 'cubeic-alert',
                        title: '请绑定手机号',
                        content: '',
                        confirmBtn: {
                            text: '立即绑定',
                            active: true,
                            disabled: false,
                            href: 'javascript:;'
                        },
                        cancelBtn: {
                            text: '再看看',
                            active: false,
                            disabled: false,
                            href: 'javascript:;'
                        },
                        onConfirm: () => {
                            this.$router.push('/my/edit')
                        }
                    }).show()
                }
            })
            detail(this.$route.query.id,this.$route.query.teamId).then(res => {
                this.item = res.data

               if(res.extra.group){
                 this.group = res.extra.group
                 // setTeamId(this.group.userId)
               }else {
                 this.group = null
               }
                if (this.item.info != null && this.item.info.length > 56){
                    this.ifOver =true
                }
                // console.log( res.extra.saleType)
                this.sku = this.item.skuThemes
                if (this.sku){
                    this.sku.forEach(item=>{
                        item.items.forEach(theme=>{
                            this.$set(theme,'selected',false)
                            this.$set(theme,'disabled',false)
                        })
                    })
                }
                this.coupons = res.extra.saleType
                // console.log(this.sku)
                this.mallSkus = this.item.mallSkus
                this.comments = res.data.comments

                this.nowPrice = this.item.nowPrice
                this.stock = this.item.stock
                this.shop = res.extra.shop
                this.liveId = res.extra.liveId

                this.list= res.extra.bindList
                this.midImgs = this.item.midImg.split(',')
                this.bigImgs = this.item.bigImg.split(',')

                this.skuImg = this.item.img

                this.brandName = res.extra.brandName
                this.typeName = res.extra.typeName.toString()
                // console.log(this.typeName)
                // console.log(res.data)
              // this.url = process.env.VUE_APP_PATH + this.$route.fullPath + "&" + process.env.VUE_APP_TOP_USER_ID + "=" + this.userId
              this.url =  process.env.VUE_APP_PATH + '/detail?'+'id'+'='+this.$route.query.id+'&'+process.env.VUE_APP_TOP_USER_ID+'='+this.userId
              if(this.group){
                this.url += '&teamId='+this.group.userId
              }
              if (process.env.VUE_APP_NAME != "wg"||this.user.levelId !== 5) {
                    config().then(res => {
                        let imgUrl = this.imgH + this.item.img
                        Wx.share(this.group?this.group.title:this.item.title, this.url, imgUrl, this.item.info).then(res => {
                            //分享成功赠送积分
                            // share()
                        })
                    })
                }
              this.getCode()
            })
            docDown(this.$route.query.id).then(res=>{
                this.$nextTick(()=>{
                    this.docData = res.data
                })
            })
            getPriceList(this.$route.query.id).then(res=>{
                this.priceList = res.data
                // console.log(res)
                this.shopPrice = res.extra.shopPrice
            })



            if(this.$route.query.type=='share'){
                this.$nextTick(()=>{
                    this.plantPoster()
                })
            }
        },
        filters:{
            ellipsisName (value) {
                if (!value) return ''
                if (value.length > 18) {
                    return value.slice(0,18) + '...'
                }
                return value
            },
            ellipsisInfo (value) {
                if (!value) return ''
                if (value.length > 32) {
                    return value.slice(0,32) + '...'
                }
                return value
            }
        },
        mounted() {
            window.addEventListener('scroll',this.handleScroll)
        },
        destroyed() {
            window.removeEventListener('scroll',this.handleScroll)
        },
        computed:{
            ...mapState({
                cartCount: state => state.mall.cartCount,
                userId: state => state.user.user.userId
            }),
            hasSku(){
                if(this.item&&this.item.openSku){//零售且开启规格
                    return true
                }
                return false
            },
            skuFlag(){
                let flag = false
                this.skuName.forEach(name=>{
                    if (name){
                        flag = true
                    }
                })
                return flag
            },
        },
        methods:{
            ...mapActions([
                'updateCartCount'
            ]),
            turn(path){
                this.$router.push(path)
            },
            goAsking(path){
                this.$router.push(path+"?id="+this.$route.query.id)
            },
            handleScroll(){
                const top = window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0
                let opacity  = top/375
                opacity = opacity>1?1:opacity
                this.opacityStyle={opacity}

            },
            changPage(current){
                this.currentIndex = current+1
            },
            back(){
                this.$router.go(-1)
                this.currentIndex = 1
                this.dowState = false
            },
            docDowload(linkRef){
                var form = document.createElement('form');
                form.action = this.imgH+linkRef;
                document.getElementsByTagName('body')[0].appendChild(form);
                form.submit();
            },
            addCart() {
                if (!this.item.shelf||this.item.shelf==2){
                    return
                }
                let nameFlag = true
                this.skuName.forEach(name=>{
                    if (name==''){
                        nameFlag=false
                    }
                })
                for (let i=0;i<this.skuName.length;i++){
                    if (this.skuName[i]==undefined){
                        nameFlag=false
                    }
                }
                console.log(this.sku)
                if(this.hasSku&&(!nameFlag||this.skuName.length!=this.sku.length)){
                    this.showSku()
                    showError('请选择规格')
                }else {


                    addCart(this.item.id,this.skuName.join('-'),this.quantity).then(res => {
                        this.updateCartCount(this.cartCount + 1)
                        if(this.toCart){
                            this.hideSku()
                            this.$router.push('/cart')
                        }else {
                            // Toast.showInfo("加入购物车成功!")
                            showInfo('加入购物车成功!')
                            this.hideSku()
                        }
                    })
                }
            },
            toCommit() {
                this.toCart = true
                this.addCart()
            },
            showSku(e) {
                if (e==1){
                    this.toggle = true
                }else {this.toggle=false}

                this.skuShow = true
                // for (let i=0;i<this.item.mallSkus.length;i++) {
                //     if (this.item.mallSkus[i].disable ==false){
                //         this.changeType(i,this.item.mallSkus[i].name,false)
                //         break
                //     }
                // }
                // this.changeType(0,0,1,false)
                // this.$nextTick(()=>{
                //     this.changeType(0,0,1,true)
                //     this.skuName = ['','','']
                // })
                if (!this.skuFlag){
                    this.changeType(0,0,1,false)
                    // this.changeType(0,0,1,true)
                    this.$nextTick(()=>{
                        this.changeType(0,0,1,true)
                        this.skuName = []
                    })
                }
            },
            hideSku(){
                this.skuShow = false
            },
            changeType(themeIndex,index,name,flag,disabled){

                this.sku[themeIndex].items.forEach(item=>{
                    item.selected = false
                })
                if (flag){
                    this.skuName[themeIndex] = ''
                }else {
                    this.sku[themeIndex].items[index].selected = true
                    this.skuName[themeIndex] = name
                }


                let nameFlag = true
                this.skuName.forEach(name=>{
                    if (name==''){
                        nameFlag=false
                    }
                })
                for (let i=0;i<this.skuName.length;i++){
                    if (this.skuName[i]==undefined){
                        nameFlag=false
                    }
                }
                if (this.skuName.length==this.sku.length&&nameFlag){
                    this.mallSkus.forEach(item=>{
                        if (item.name==this.skuName.join('-')){
                            this.nowPrice = item.nowPrice
                            this.stock = item.stock
                            this.skuImg = item.img||this.item.img
                        }
                    })
                }else {
                    this.nowPrice = this.item.nowPrice
                    this.stock = this.item.stock
                }
                if (this.shopPrice){
                    this.nowPrice = this.shopPrice
                }






            },
            toShop(id){
                this.$router.push({
                    path:`/shop/list?uid=${id}`
                })
            },
            buyBind(bindItem){
                if (!this.item.shelf||this.item.shelf==2){
                    return
                }
                let nameFlag = true
                this.skuName.forEach(name=>{
                    if (name==''){
                        nameFlag=false
                    }
                })
                for (let i=0;i<this.skuName.length;i++){
                    if (this.skuName[i]==undefined){
                        nameFlag=false
                    }
                }

                if(this.hasSku&&(this.skuName.length!=this.sku.length||!nameFlag)){
                    this.showSku(1)
                    showError('请选择规格')
                }else {
                    let first =bindItem.bindNumber||1
                    let sec = bindItem.firstBindNumber||1
                  addCart(bindItem.id,null,sec).then(res=>{
                        this.updateCartCount(this.cartCount + first)
                        addCart(this.item.id,this.skuName.join('-'),first).then(res=>{
                            this.updateCartCount(this.cartCount + sec)
                            this.hideSku()
                            this.$router.push('/cart')
                        })
                    })
                }
            },
            toShare(){
                this.isShow = !this.isShow
                this.showPoster=false
            },
            showPro(){
                this.showProduct = !this.showProduct
            },
            showDow(){
                this.dowState = !this.dowState
            },
            getCode(){
                let QRCode = require('qrcode')
                // let url =  process.env.VUE_APP_PATH + '/detail?'+'id'+'='+this.$route.query.id+'&'+process.env.VUE_APP_TOP_USER_ID+'='+this.userId
              QRCode.toDataURL(this.url, {type:'terminal'}, (err, url)=> {
                    this.wxQrCode = url
                })
            },
            addGroup(){
              group(this.$route.query.id).then(res=>{
                if(res.data){
                  this.group = res.data
                }
                showInfo('申请成功!')
              })
            },
            async plantPoster(){
                this.$refs.detail.scrollIntoView(true)
                showLoading('正在加载分享海报')
                this.toShare()
                if (this.posterUrl){
                    this.showPoster=true
                    hide()
                    return
                }

                let poster = this.$refs.poster
                //
                const options = {
                    type: 'dataURL',
                    useCORS: true
                }
                this.posterUrl = await this.$html2canvas(poster, options);
                this.showPoster=true
                this.showMainPoster = false
                hide()

                // if(window.html2canvas){
                //     window.html2canvas(poster,{useCORS: true}).then(canvas=>{
                //         this.posterUrl = canvas.toDataURL("image/png")
                //         this.showPoster=true
                //         this.showMainPoster = false
                //         hide()
                //     })
                // }else {
                //     html2canvas(poster,{useCORS: true}).then(canvas=>{
                //         this.posterUrl = canvas.toDataURL("image/png")
                //         this.showPoster=true
                //         this.showMainPoster = false
                //         hide()
                //     })
                // }





            },
            hidePoster(){
                this.showPoster=false
                this.isShow = false
            },
            toLIve(){
                this.$router.push({
                    path:'/live',
                    query:{id:this.liveId}
                })
            }
        }

    }
</script>

<style scoped lang="stylus">
    .detail
        background  $page-bg
        .shareBg
            position fixed
            top 0
            left 0
            bottom 0
            right 0
            width 100%
            z-index 998
            background-color: rgba(79,78,78,0.48);
            height 100%
        .dowLoadBox
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
            position: fixed;
            top: 0;
            left: 0;
            .download
                width 100%
                position fixed
                bottom 0
                left 0
                z-index 998
                background-color: #Fff
                height 425px
                padding 22px 12px 12px 12px
                .title
                    display flex
                    justify-content flex-end
                    align-items center
                    .text
                        color #333
                        font-size 15px
                        margin-right 7.3rem
                        font-weight bold
                    img
                        display inline-block
                        color #999
                        width 18px
                        height 18px
                .content
                    .line
                        display flex
                        justify-content flex-end
                        align-items center
                        margin-right: 0.6rem
                        padding 22px 0
                        border-bottom 1px solid #F4F3F3
                        .text
                            width 6.56rem
                            margin-right 35px
                            color #333
                            font-size 13px
                        .dow
                            color #999
                            font-size 13px

        .headbox
            height 44px
            width calc(100% - 50px)
            background-color: #fff
            font-size 16px
            padding 0 25px
            display flex
            color #fff
            justify-content space-between
            align-items center
            position fixed
            top 0
            left 0
            z-index 1100
            .back
                margin-left: -9px;
                img
                    width 22px
                    height 22px
                    display inline-block
            .seat
                display flex
                div
                    width 22px
                    height 22px
                    margin-left 22px
                    img
                        width 22px
                        height 22px
                        display inline-block


        .headSec
            width calc(100% - 50px)
            height 44px
            display flex
            padding-left 0.32rem
            align-items center
            font-size 16px
            position fixed
            z-index 500
            .back
                width 32px
                height 32px
                display flex
                justify-content space-around
                align-items center
                color #fff
                background-color rgba(0,0,0,.3)
                border-radius 50%
                img
                    width 22px
                    height 22px
                    display inline-block
        .con
            background-color: #F4F3F3;
            padding-bottom: 47px;
            .slide
                position relative
                width 100%
                height 375px
                .img
                    width 100%
                    height 375px
                .iconbox
                    position absolute
                    top 0.2rem
                    right 0rem
                    dispaly flex
                    div
                        width 32px
                        height 32px
                        background-color rgba(0,0,0,.3)
                        border-radius: 50%
                        display inline-block
                        text-align: center;
                        line-height: 32px;
                        margin-right 0.29rem
                        img
                            display inline-block
                            width 22px
                            height 22px

                .currentIndex
                    position absolute
                    bottom 0.32rem
                    right 0.32rem
                    width 1.066rem
                    height 0.5866rem
                    background-color rgba(0,0,0,.3)
                    border-radius: 0.2933rem
                    font-size 0.266rem
                    color #fff
                    font-weight 500
                    text-align center
                    line-height 0.5866rem
            .desc
                background-color: #fff
                padding 15px
                padding-right 30px
                padding-bottom 19px
                poposition relative
                .control
                    $priceColor = #00D6c0
                    .price
                        display flex
                        align-items flex-end
                        font-weight bold
                        padding-top 5px
                        .nowPrice
                            font-size 0.4rem
                            color $priceColor
                            .nowPriceBig
                                font-size 27px
                                color $priceColor
                        .oldPrice
                            font-size 0.2933rem
                            color #C8C8C8
                            text-decoration line-through
                            margin-left 0.05rem
                            padding 0 0.1466rem
                            .oldPriceBig
                                font-size 0.4533rem
                        .title
                            color #333
                            font-size 0.48rem
                            margin-left 0.32rem
                        .proPrice
                            display flex
                            align-items: baseline;
                            color $priceColor
                            font-size 0.4rem
                            .text
                                font-size 0.7rem
                .tips
                    display flex
                    justify-content flex-end
                    align-items center
                    position relative
                    margin 0.13rem 0
                    p
                        margin-right 0.4266rem
                        border-radius 0.06rem
                        font-size 0.266rem
                        display inline-block
                        padding 0.08rem 0.08rem
                    .red
                        color #fe4b38
                        background-color: #fee0dd

                    .yellow
                        color #FF9616
                        background-color: #fff7de
                    .green
                        color #0C978A
                        background-color #BDFBF5
                .nameBtn
                    height 1.28rem
                    position relative
                    .btn
                        position absolute
                        right -0.45rem
                        top 50%
                        width 60px
                        height 30px
                        margin-top -15px
                        font-size 0.32rem
                        background-color #00D6C0
                        border-radius 10px 0 10px 0
                        color #fff
                        display flex
                        justify-content center
                        align-items center
                        text-align center
                        span
                            display inline-block
                        img
                            width 0.32rem
                            height 0.32rem
                    .name
                        padding-right 1.5rem
                        color #333
                        font-size 0.4533rem
                        line-height 22.5px
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                .nameInfo
                    position relative
                .txt
                    color: #333;
                    margin-bottom: 5px;
                    color #999
                    font-size 0.32rem
                    line-height 0.4533rem
                    span
                        inline-block
                .over-hidden
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                .btn
                    position absolute
                    bottom -0.3rem
                    right 0
                    color #333
                    display flex
                    align-items center
                    font-size 12px
                    img
                        width 9px
                        height 5px
            .coupon
                display flex
                justify-content space-between
                align-items center
                height 44px
                font-size 13px
                color #F59E11
                padding 0 15px
                background-color: #FFFAF2
                margin-top 21.5px
                .btn
                    height 23px
                    background-color #F59E11
                    color #FFFFFF
                    font-size 11
                    line-height 23px
                    padding 0 7.5px
                    border-radius 5px
            .imgDetail
                width 100%
                background-color: #fff
                .title
                    height 50px
                    line-height 50px
                    color #333
                    font-size 0.4rem
                    font-weight bold
                    margin-left 0.32rem
                img
                    width 100%

        .mode
            background-color: #fff
            padding 0 0.6rem
            margin-bottom 10px
            margin-top 10px
            .item
                height 44px
                display flex
                justify-content space-between
                align-items center
            .itembox
                height 44px
                display flex
                justify-content space-between
                align-items center
                overflow hidden
                .titlebox
                    font-szie 0.4rem
                    font-size: medium;
                    font-weight 500
                    color #333
                .contentbox
                    font-szie 0.4rem
                    font-size: medium;
                    margin-left -5rem
                    color #C8C8C8
                img
                    width 11px
                    height 11px
                    display inline-block

            .itemB
                font-size 0.4rem
                font-weight bold
                .title
                    color #333
                    font-size 13px
                    margin-right 20px
                .btn
                    width 0.323733rem
                    height 0.323733rem
                .content
                    flex 1
                    display flex
                    font-size 13px
                    color #C8C8C8
                    .area
                        margin-left 5px
                        margin-right 20px
                    img
                        width: 13px
                        height: 13px
                .btn
                    height 100%
                    font-size 11px
                    line-height 44px
                    color #ccc
                    transform scale(1.3)
                .pl45
                    padding-left 45px
                    div
                        white-space nowrap
                        overflow hidden
                        text-overflow ellipsis
                        word-break break-all
                        max-width 80px
                        color #999999
                        font-size 13px
                        padding 6px
                        background-color: #F6F6F6
                        margin-right 5px
                .tips
                    margin-left 5px
                    color #999
                    font-size 12px
                    img
                        width: 11px
                        height: 11px
                        padding 1px 1px 0 0
                .titleB
                    color #303333
                    font-size 15px

            .descBox
                background-color #F4F3F3
                border-radius 0.133rem
                font-size 0.3466rem
                padding 0.3466rem
                color #333
                .box
                    margin-bottom 0.3466rem
                .boxHid
                    margin-bottom 0
                .descName
                    display inline-block
                    width 2rem
                    color #999
            .angecyBox
                padding-bottom 0.6rem
                .angecybox
                    color #333
                    font-size 0.3466rem
                    text-align center
                    margin-top 0.6rem
                    position relative
                    &:before
                        content ''
                        width 0.0266rem
                        height 3.16rem
                        position absolute
                        left 50%
                        top 0
                        background-color #F4F3F3
                    &:last-child
                        border-bottom 0.0266rem solid #F4F3F3
                    .box
                        span
                            font-size 0.3733rem
                    div
                        border-top 0.0266rem solid #F4F3F3
                        border-right 0
                        border-left 0
                        height 0.6rem
                        line-height 0.6rem
                        span
                            width 50%
                            display inline-block

            .flexL
                justify-content start
            .shop
                padding 15px 0
                display flex
                justify-content space-between
                align-items center
                .shopImg
                    width: 47px
                    height: 47px
                    img
                        width: 47px
                        height: 47px
                .name
                    flex 1
                    color #333
                    font-size 16px
                    margin-left 10px
                .btn
                    font #333
                    font-size 0.32rem
                    display flex
                    align-items center
                    img
                        width 11px
                        height 11px
            .dowGoods
                .boxA,.boxB
                    color #333
                    font-size 0.4rem
                    border-bottom 0.026rem solid #F4F3F3
                    padding-bottom 0.38rem
                    .titlebox
                        padding-top 0.38rem
                        display flex
                        justify-content space-between
                        align-items center
                        .dowtxt
                            color #333
                            font-szie 0.4rem
                            font-weight bold
                        .all
                            color #00D6C0
                            font-size 0.3466rem
                            display: flex;
                            align-items: center;
                            img
                                width 0.2933rem
                                height 0.2933rem
                    .content
                        .line
                            display flex
                            justify-content space-between
                            align-items center
                            margin-top 0.38rem
                            .name
                                width 6rem
                                color #333
                                font-size 0.3466rem
                                white-space nowrap
                                text-overflow ellipsis
                                overflow hidden
                                word-break break-all
                            .dow
                                color #999
                                font-szie 0.3466rem
                                transform: scale(0.8);
                .boxB
                    border-bottom 0
                    .titlebox
                    .content
                        .line
                            .namebox
                                color #C8C8C8
                                &:before
                                    content '问店铺'
                                    background #00D6C0
                                    color #fff
                                    font-szie 0.26rem
                                    display inline-block
                                    transform: scale(0.8);
                                    padding 0.08rem
                            .dow
                                width 60px
                                height 20px
                                border 1px solid #00D6C0
                                border-radius 10px
                                line-height 20px
                                text-align center
                                font-size 13px
                                transform scale(0.85)
                                span
                                    color #00D6C0
            .msg
                padding 15px 0
                .title
                    color #333
                    font-size 0.4rem
                    font-weight bold
                .goods
                    position relative
                    z-index: 0
                    margin-top 10px
                    width 100%
                    .goodsImg
                        display flex
                        position relative
                        padding 0.24rem 0
                        justify-content space-between
                        align-items center
                        border-bottom 1px solid #F4F3F3
                        .selected
                            width 16px
                            height 16px
                            margin-top -14px
                            img
                                width 16px
                                height 16px
                                display inline-block
                        img
                            width: 80px
                            height: 80px
                            display inline-block
                        .namePrice
                            width 3rem
                            margin-top -1rem
                            .priceLittle
                                font-size 0.2rem
                            .name
                                font-size 0.3466rem
                                color #333
                                line-height 1.2rem
                                white-space nowrap
                                text-overflow ellipsis
                                overflow hidden
                                word-break break-all
                            .price
                                color #00D6C0
                                font-size 0.3466rem
                                font-weight 500
                                text-overflow ellipsis
                                span
                                    font-weight 500
                                .nowPrice
                                    font-weight 500
                                    span
                                        font-weight 500
                                .oldPrice
                                    color #8F9999
                                    font-weight 0
                                    font-size 9.5px
                                    margin-left 3.5px
                                    text-decoration:line-through
                        .num
                            color #5F6565
                            font-size 13px
                            margin-top -1.45rem
                .sum
                    margin 15px 0
                    color #333
                    text-align center
                    font-size 0.4266rem
                    span
                        margin-right 5px
                    .now
                        font-weight 500
                        color #00D6C0
                        margin-right 0.5rem
                    .old,.last
                        color #C8C8C8
                    .old
                        text-decoration:line-through
                .btn
                    margin 0 auto
                    width: 3.84rem
                    height: 33px
                    line-height 33px
                    color #F4FEFE
                    font-size 15px
                    text-align center
                    background-color: #00D6C0
                    border-radius 16.5px
        .sku
            .bg
                z-index 1
                position fixed
                top 0
                right 0
                left 0
                bottom 0
                height 100%
                background-color rgba(79, 78, 78, 0.48)
            .cart
                z-index 555
                position fixed
                bottom 0
                width 100%
                height 540px
                background-color: #fff
                border-radius 10px 10px 0 0
                .cartCon
                    padding 15px 15px 6.5px 15px
                .title
                    display flex
                    align-items center
                    .goodsImg
                        width: 100px
                        height: 100px
                        img
                            width: 100px
                            height: 100px
                    .desc
                        margin-left 10px
                        font-size 13px
                        .price
                            color #00D6C0
                            font-size 20px
                        .stock
                            color #666
                            margin 8px 0
                        .word
                            color #333
                .types
                    margin-top 10px
                    height 315px
                    .cell
                        height 100%

                    .title
                        color #333
                        font-size 14px
                    .type
                        margin-top 15px
                        height 100%
                        .title
                            margin-bottom 5px
                        .itemBox
                            display flex
                            flex-wrap wrap
                        .item
                            margin-bottom 5px
                            height 30px
                            border-radius 5px
                            line-height 30px
                            text-align center
                            padding 0 21.5px
                            background-color: #F5F5F5
                            color #666
                            font-size 15px
                            margin-right 5px
                            white-space: nowrap;
                            text-overflow: ellipsis
                            overflow: hidden;
                            word-break: break-all;
                        /*max-width 38px*/
                        .active
                            background-color: #00D6C0
                            color #f7ffff
                        .disabled
                            text-decoration line-through

                .count
                    display flex
                    justify-content space-between
                    margin-top 20px
                    .title
                        color #333
                        font-size 14px
                .toCart
                    display flex
                    margin 0 auto
                    margin-top 15px
                    width 300px
                    border-radius 18px
                    height 36px
                    .join,.buy
                        width 150px
                        text-align center
                        height 100%
                        line-height 36px
                        font-size 13px
                        color #fff
                    .join
                        background-color #FFB760
                        border-radius 18px 0 0 18px
                    .buy
                        background-color #00D6C0
                        border-radius 0 18px 18px 0
                .ok
                    display flex
                    justify-content center
                    background-color #00D6C0
                    line-height 36px
                    font-size 13px
                    color #fff
            .product
                z-index 555
                position fixed
                bottom 0
                width 100%
                height 375px
                background-color: #fff
                border-radius 10px 10px 0 0
                .con
                    padding 15px 15px 6.5px 15px
                .title
                    font-size 15px
                    color #333333
                    text-align center
                .content
                    display flex
                    font-size 13px
                    height 290px
                    .name
                        width 72.5px
                        color #999999
                    .parameter
                        flex 1
                        color #666666
                    li
                        margin-top 28px
                .btn
                    width: 300px
                    height: 36px
                    font-size 13px
                    color #fff
                    margin 0 auto
                    text-align center
                    line-height 36px
                    background-color: #00D6C0
                    border-radius 18px
        .poster
            width 325px
            height 520px
            margin-top -99999px
            position relative
            .bg
                width 100%
                height 520px
            .mainImg
                position absolute
                top 85px
                left 38px
                width 250px
                height 250px
                background-color: #fff
            .shopImg
                position absolute
                width: 36px
                height: 36px
                top: 34px
                left: 33px
            .title
                position absolute
                height 20px
                color #00C3BD
                font-size 14px
                font-family:PingFangSC-Medium,PingFang SC;
                font-weight:500
                line-height 20px
                top 35px
                left 79px
            .wxQrCode
                width: 88px
                height: 88px
                position absolute
                right 32px
                bottom 64px
                background-color: #fff
            .shareTitle
                position: absolute;
                top: 290px
                left: 32px
                width: 264px
                height: 54px
            .word
                position absolute
                width: 150px
                left 33px
                top: 412px
                font-family:PingFangSC-Medium,PingFang SC;
            .name
                width 150px
                color #303333
                font-size 15px
                line-height 21px
                overflow hidden
            .desc
                width 150px
                color #606666
                font-size 10px
                line-height 14px
            .price
                position absolute
                top 354px
                left 67px
                width 184.5px
                height 35px
                color #303333
                font-family:PingFangSC-Semibold,PingFang SC;
                font-weight 700
                font-size 32px
                .float
                    font-size 15px
                    font-weight 400
            .discountInfo
                position absolute
                white-space: nowrap;
                height: 14px
                width: 45px
                font-family:PingFangSC-Medium,PingFang SC;
                font-weight:500;
                line-height 14px
                text-align center
                color #00C3BD
                font-size 10px
                top: 298.5px
                left: 48px
            .discountPrice
                position absolute
                width 50px
                font-size 24px
                font-family:PingFangSC-Semibold,PingFang SC;
                font-weight:600;
                color #00C3BD
                text-align center
                left 43px
                top 311px
            .actInfo,.buyInfo
                position absolute
                height 25px
                width 132px
                top: 312px
                left: 123px
                font-size 18px
                font-family:PingFangSC-Medium,PingFang SC;
                color #fff
            .buyTheme
                position: absolute;
                color #00C3BD
                width: 40px
                height 45px
                font-family:PingFangSC-Semibold,PingFang SC;
                font-weight:600;
                top: 298px
                left: 50px
                font-size 18px

        .posterImg
            width 85%
            position fixed
            z-index 999
            top 0
            left 0
            right 0
            bottom 0
            margin auto
        .liveImg
            position fixed
            right 0
            bottom: 100px;

</style>
